<template>
  <div class="g-content-index" :style="{'height':streetInHeight+ 'px'}">
    <alarm-map dept-id="302"></alarm-map>
    <!-- 右侧浮层 -->
    <!-- <div class="float-right">
      <alarmTotal />
      <alarmTrend class="mt10" />
      <fireSafety class="mt10" />
      <cellPaiming class="mt10" />
      <monthWarnTrend class="mt10" />
    </div> -->
  </div>
</template>

<script>
// import Alarm from '../components/common/event/alarm.vue'
import AlarmMap from '../components/village/alarmMap'
import alarmTotal from '../components/street/alarmTotal'
import alarmTrend from '../components/street/alarmTrend'
import fireSafety from '../components/street/fireSafety'
import cellPaiming from '../components/street/cellPaiming'
import monthWarnTrend from '../components/common/table/monthWarnTrend'

export default {
  name: 'index',
  data () {
    return {
      streetOutHeight: 0,
      streetInHeight: 0
    }
  },
  components: {
    AlarmMap,
    alarmTotal, // 报警总数
    alarmTrend, // 报警趋势
    fireSafety, // 消防安全
    cellPaiming,
    monthWarnTrend
  },
  mounted () {
    let h = this.$base.getDocumentHeight()
    this.streetOutHeight = h - 50
    this.streetInHeight = h - 60
  }
}
</script>

<style scoped>
.g-content-index {
  width: 100%;
  height: 100%;
  position: relative;
}

.float-right {
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 10px;
  width: 270px;
  overflow: hidden;
}

.mt10 {
  margin-top: 10px;
}

.street-right-container {
  overflow: hidden;
  overflow-y: auto;
  width: 288px;
  height: 100%;
}

.street-right-main {
  width: 270px;
}

.H10 {
  height: 10px;
}
</style>
